<template>
  <div>
  <h1>{{msg}}</h1>

  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
  <div>
</template>

<script>
  export default {
    setup() {
      //测试组合式API
      let { ref } = Vue
      const username = ref('');
      const password = ref('');
      const onSubmit = (values) => {
        console.log('submit', values)
      }

      return {
        username,
        password,
        onSubmit,
      };
    },
    data(){
      return {
        msg:'test2'
      }
    },
    mounted() {
    },
    methods: {
     
    }
  }
</script>

<style scoped>

</style>